
import React, { useState } from 'react'
import {Outlet, useNavigate} from 'react-router-dom'
import { Tabbar } from 'react-vant'
import { HomeO, Search, FriendsO, SettingO } from '@react-vant/icons'

export default function App() {
  const [Navlist, setNavlist] = useState([
    {
      name: '首页',
      icon: <HomeO/>,
      path: '/app/shou'
    },
    {
      name: '社区',
      icon: <Search/>,
      path: '/app/layout'
    },
    {
      name: '收藏',
      icon: <FriendsO/>,
      path: '/app/cang'
    },
    {
      name: '报告',
      icon: <SettingO/>,
      path: '/app/history'
    }
  ])
  const router = useNavigate()
  return (
    <div>
      <Outlet/>
      <Tabbar onChange={(value)=>{
        router(Navlist[value].path)
        
      }}>
        {Navlist.map((item, index) => (
          <Tabbar.Item key={index} icon={item.icon}>
            <div>
              {item.name}
            </div>
          </Tabbar.Item>
        ))}
      </Tabbar>
    </div>
  )
}